<template>
  <div class="app-container engineering-container" v-spin-loading="{ spinning: isLoading, tip: '加载中...' }">
    <a-breadcrumb style="margin-bottom: 20px">
      <a-breadcrumb-item>工程管理</a-breadcrumb-item>
      <a-breadcrumb-item>{{ label }}</a-breadcrumb-item>
    </a-breadcrumb>
    <micro-app
      v-if="isShowPage"
      class="micro-app"
      name="projectmanage"
      :url="appUrlConfig.project"
      baseroute="/projectmanage"
      :data="engineeringData"
      fiber
      router-mode="native"
      @mounted="microAppMounted"
      @aftershow="microAppMounted"
      @error="onError"
      keep-alive
    />
    <ErrorPage v-else :code="500"></ErrorPage>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getToken } from "@/utils/auth";
import { useUserStore } from "@/stores";
import appUrlConfig from "@/config/appUrlconfig";
import ErrorPage from "@/views/error/components/ErrorPage.vue";
import { mainReceiveData } from "@/microApp/utils";

const userStore = useUserStore();
const engineeringData = ref({
  token: getToken(),
  userInfo: userStore.userInfo,
  roles: userStore.roles
});

const label = ref("");
mainReceiveData("projectmanage", (data: any) => {
  const currentRouteName = data.name ?? "";
  if (currentRouteName && currentRouteName == "clientInfo") {
    let customerName = data?.customerInfo?.customerName;
    let residence = data?.customerInfo?.residence;
    if (data.customerInfo && residence) {
      label.value = data?.meta?.title + "-" + customerName + "-" + residence;
    } else if (data.customerInfo && !residence) {
      label.value = data?.meta?.title + "-" + customerName;
    }
  } else {
    label.value = data?.meta?.title ?? "";
  }
});

const isLoading = ref(true);
const microAppMounted = () => {
  isLoading.value = false;
};

const isShowPage = ref(true);
const onError = () => {
  isShowPage.value = false;
};
</script>

<style scoped lang="scss">
.engineering-container {
  height: calc(100% - 40px);
}

.micro-app {
  height: calc(100% - 44px);
}
:deep(micro-app-body) {
  height: 100%;
}
</style>
